<script setup>
import { useTodoListStore } from '@/stores/useTodoListStore'
import TodoItem from './TodoItem.vue'

const props = defineProps(['list'])

const todoListStore = useTodoListStore()

function toggleStatus(id, v) {
  todoListStore.toggleTodo(id, v)
}
</script>

<template>
  <div class="TodoList flex flex-col">
    <TodoItem
      v-for="todo in props.list"
      :title="todo.title"
      :key="todo.id"
      :id="todo.id"
      @change="(v) => toggleStatus(todo.id, v)"
      :completed="todo.completed"
    />
    <div class="flex">
      <span class="bg-green-200 p-1 mr-2"> total: {{ todoListStore.todoSize }} </span>
      <span class="bg-green-200 p-1"> completed: {{ todoListStore.completed.length }} </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.TodoList {
  // scss code
}
</style>
